// 引入项目设计系统变量
@import '../../../app.less';

// 主容器样式
.credit-record-container {
    min-height: 100vh;
    background-color: @bg-primary;
    padding-bottom: @spacing-xxl;
}

// iOS设备样式
.credit-record-container.ios {
    height: calc(100vh - @header-bar-height-ios);
}

// Android设备样式
.credit-record-container.android {
    height: calc(100vh - @header-bar-height-android);
}

// 空状态样式
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 160rpx 0;
    text-align: center;

    .empty-icon {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: @spacing-lg;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .empty-title {
        font-size: @font-size-lg;
        color: @text-primary;
        margin-bottom: @spacing-sm;
        font-weight: 500;
    }

    .empty-desc {
        font-size: @font-size-sm;
        color: @text-tertiary;
    }
}

// 记录包装器
.records-wrapper {
    padding: @spacing-md @spacing-lg;
}

// 月份分组
.month-group {
    margin-bottom: @spacing-xl;
    background-color: @card-bg;
    border-radius: @card-radius;
    overflow: hidden;
    box-shadow: @card-shadow;
}

// 月份标题
.month-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: @spacing-md @spacing-lg;
    background-color: @bg-secondary;
    border-bottom: 1rpx solid @border-light;

    .month-text {
        font-size: @font-size-base-md;
        font-weight: 600;
        color: @text-primary;
    }

    .month-points-total {
        font-size: @font-size-sm;
        color: @text-secondary;
        background-color: rgba(7, 193, 96, 0.1);
        padding: 4rpx @spacing-sm;
        border-radius: 16rpx;
    }
}

// 月份记录列表
.month-records {
    padding-bottom: 10rpx;
}

// 记录项
.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: @spacing-md @spacing-lg;
    position: relative;

    // 虚线分隔符
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: @spacing-lg;
        right: @spacing-lg;
        height: 1rpx;
        background-image: linear-gradient(to right, @border-light 50%, transparent 50%);
        background-size: 16rpx 1rpx;
        background-repeat: repeat-x;
    }

    &:last-child::after {
        display: none;
    }

    // 左侧内容
    .record-left {
        display: flex;
        align-items: center;
        flex: 1;
    }

    // 记录图标
    .record-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: @spacing-md;

        image {
            width: 40rpx;
            height: 40rpx;
        }

        // 正积分图标背景
        &.icon-positive {
            background-color: rgba(7, 193, 96, 0.1);
        }

        // 负积分图标背景
        &.icon-negative {
            background-color: rgba(245, 63, 63, 0.1);
        }
    }

    // 记录信息
    .record-info {
        flex: 1;

        .record-desc {
            font-size: @font-size-base-md;
            color: @text-primary;
            margin-bottom: 8rpx;
            display: block;
            line-height: 1.4;
        }

        .record-date {
            font-size: @font-size-sm;
            color: @text-tertiary;
        }
    }

    // 积分显示
    .record-points {
        font-size: @font-size-lg;
        font-weight: 600;
        padding: 6rpx @spacing-sm;
        border-radius: 18rpx;
        min-width: 100rpx;
        text-align: center;
        line-height: @line-height-md;

        // 正积分样式
        &.points-positive {
            // background-color: rgba(7, 193, 96, 0.15);
            color: @success-color;
            border: 1rpx solid rgba(7, 193, 96, 0.2);
        }

        // 负积分样式
        &.points-negative {
            background-color: rgba(245, 63, 63, 0.15);
            color: @error-color;
            border: 1rpx solid rgba(245, 63, 63, 0.2);
        }
    }
}

// 加载中提示
.loading-more {
    text-align: center;
    padding: @spacing-lg 0;
    font-size: @font-size-sm;
    color: @text-tertiary;
}

.no-more {
    text-align: center;
    padding: @spacing-lg 0;
    font-size: @font-size-sm;
    color: @text-tertiary;
    padding-bottom: 200rpx;
}